<template>
  <div class="config-info">
    <div class="content-box">
      <div class="content-left">
        <div class="left-title">区域名称</div>
        <div class="left-box">
          <div
            :class="['box-item', state.currentArea == index ? 'active' : '']"
            :key="index"
            v-for="(item, index) in state.secList"
          >
            <el-tooltip :content="item.zName" placement="top" :disabled="item.zName.length < 6">
              <span @click="handleClickArea(item, index)">{{ item.zName }}</span>
            </el-tooltip>
            <span>
              <!-- <el-icon @click="handleEditConifg">
                <EditPen />
              </el-icon> -->
            </span>
          </div>
          <!-- <div class="box-btn" @click="handleChangeArea()">区域调整</div> -->
        </div>
      </div>
      <div class="content-left">
        <div class="left-title">控制断面名称</div>
        <div class="left-box">
          <div
            :class="['box-item', state.currentSec == index ? 'active' : '']"
            :key="index"
            v-for="(item, index) in state.secArr"
          >
            <el-tooltip :content="item.blknm" placement="top" :disabled="item.blknm.length < 6">
              <span @click="handleClickSec(item, index)">{{ item.blknm }}</span>
            </el-tooltip>
            <span>
              <!--
              <el-icon @click="handleEditConifg">
                <EditPen />
              </el-icon> -->
            </span>
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="right-title">
          <span
            >河系计算方案设置区-<span class="name">{{ state.secName }}</span></span
          >
          <div class="select-box">
            <span>区域方案:</span>
            <el-select
              v-model="state.zoneSchemesParams.zscid"
              class="m-2"
              placeholder="请选择"
              @change="handleChangeAreaScheme"
            >
              <el-option
                v-for="item in state.zoneSchemeArr"
                :key="item.id"
                :label="item.scName"
                :value="item.id"
              />
            </el-select>
          </div>
        </div>
        <div class="right-box">
          <el-tabs type="border-card" @tab-click="handleTabsClcik">
            <el-tab-pane label="洪水预报">
              <div class="flood-form">
                <div class="form-item">
                  <span class="name">模&nbsp;&nbsp;型&nbsp;&nbsp;名&nbsp;称&nbsp;:</span>
                  <span>
                    <el-select
                      v-model="state.formName.chlMid"
                      class="m-2"
                      :disabled="!state.editFlag"
                      placeholder="请选择"
                      @change="handleChangeWaterFlood"
                    >
                      <el-option
                        v-for="item in state.waterflood"
                        :key="item.id"
                        :label="item.modelName"
                        :value="item.id"
                      />
                    </el-select>
                  </span>
                </div>
                <div class="form-item">
                  <span class="name">模型参数方案:</span>
                  <span> {{ state.floodParams || '--' }}</span>
                  <span class="btn-color" @click="handleSearchParams">查看方案参数</span>
                </div>
              </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="河道演进">
              <div class="flood-form">
                <div class="form-item">
                  <span class="name">模&nbsp;&nbsp;型&nbsp;&nbsp;名&nbsp;称&nbsp;:</span>

                  <span>
                    <el-select v-model="state.formName.evolMid" class="m-2" :disabled="!state.editFlag"
                      placeholder="请选择" @change="handleChangeRiverInfo">
                      <el-option v-for="item in state.riverInfo" :key="item.id" :label="item.modelName"
                        :value="item.id" />
                    </el-select>
                  </span>
                </div>
                <div class="form-item">
                  <span class="name">模型参数方案:</span>
                  <span> {{state.riverParams ||'--'}}</span>
                  <span class="btn-color">查看方案参数</span>
                </div>

              </div>
            </el-tab-pane>
            <el-tab-pane label="水工程">
              <div class="flood-form">
                <div class="form-item">
                  <span class="name">工&nbsp;&nbsp;程&nbsp;&nbsp;类&nbsp;型&nbsp;:</span>
                  <span>水库</span>
                </div>
                <div class="form-item">

                  <span class="name">模&nbsp;&nbsp;型&nbsp;&nbsp;名&nbsp;称&nbsp;:</span>
                  <span>
                    <el-select v-model="state.formName.resvMid" class="m-2" :disabled="!state.editFlag"
                      placeholder="请选择" @change="handleChangeReservoir">
                      <el-option v-for="item in state.reservoir" :key="item.id" :label="item.modelName"
                        :value="item.id" />
                    </el-select>
                  </span>
                </div>
                <div class="form-item">
                  <span class="name">模型参数方案:</span>
                  <span>{{state.reservoirParams ||'--'}}</span>
                  <span class="btn-color">查看方案参数</span>
                </div>

              </div>
            </el-tab-pane> -->
          </el-tabs>
        </div>
        <!-- 弹窗 -->
        <ConfigParagm
          :dialogVisible="showDialog"
          @closeDialog="closeDig"
          :paramsDetail="paramsDetail"
        />
        <!-- 时空变源参数 -->
        <paramsSkby ref="paramsSkbyRef" />
        <!-- <div class="footer-btn">
          <el-button type="primary" @click="handleSaveScheme">保存方案</el-button>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import emitter from '@/utils/bus'
import ConfigParagm from '../areaConfigInfo/cpns/configParagm.vue'
import { getXajParamsDetail } from '@/services/modules/model-config'
import RiverModal from '@/pages/ComputeMethods/cpns/riverModal/index.vue'

import {
  getZoneList,
  getZoneSchemes,
  getAreaSecList,
  getAreaSchemeConfig,
  getModel,
  getPmSchemes,
  getSchemeList,
  getZoneSchemesList
} from '@/services/modules/compute-methods'
const paramsSkbyRef = ref(null)
const state = reactive({
  secBlkcd: '',
  schemeSecArr: [],
  secName: '',
  currentSec: 0,
  currentArea: 0,
  secList: [],
  zoneSchemeArr: [],
  secArr: [],
  riverObj: {},
  waterflood: [],
  riverInfo: [],
  reservoir: [],
  areaConfig: {
    paramConf: []
  },
  paramConfArr: [],
  zoneSchemesParams: {
    zid: '',
    zscid: ''
  },
  formName: {
    chlMid: '',
    evolMid: '',
    resvMid: '',
    chlScid: '',
    evolScid: '',
    resvScid: '',
    blkcd: ''
  },
  waterfloodParams: {
    modelType: '',
    mid: '',
    blkcd: ''
  },
  riverInfoParams: {
    modelType: '',
    mid: '',
    blkcd: ''
  },
  reservoirParams: ''
})
const props = defineProps({
  schemeId: {
    type: Number,
    default: 0
  },
  zId: {
    type: Number,
    default: 0
  }
})
watch(
  () => props.zId,
  async () => {
    await getSecList(props.zId)
    if (state.secList.length) {
      handleClickArea(state.secList[0], 0)
    }
    //  await getZoneSchemesList(props.zId)
  },
  { immediate: true, deep: true }
)
const options = [
  {
    value: '区域方案1',
    label: '区域方案1'
  },
  {
    value: '区域方案2',
    label: '区域方案2'
  },
  {
    value: '区域方案3',
    label: '区域方案3'
  }
]
emitter.on('clickArea', (value) => {
  if (value) {
    state.riverObj = value
  }
})
const emit = defineEmits(['handleSaveScheme'])
// //编辑预报断面
// function handleEditConifg(){
//   state.editFlag = true
// }
//查看参数详情
let paramsDetail = ref({})
let showDialog = ref(false)
function handleSearchParams() {
  if (state.formName.chlMid == 1) {
    paramsSkbyRef.value.handleOpenParams(undefined, state.secBlkcd, {
      paramsName: state.floodParams,
      paramsId: state.formName.chlScid
    })
  } else if (state.formName.chlMid == 2) {
    getXajParamsDetail({
      scid: state.formName.chlScid
    }).then((res) => {
      if (res.code === 200) {
        paramsDetail.value = res.data
        if (res.data) {
          showDialog.value = true
          console.log('66', showDialog)
        }
      }
    })
  }
}
//修改预报模型
function handleChangeWaterFlood(item) {
  let arr = state.waterflood.filter((e) => {
    return e.id == item
  })
  state.waterfloodParams = { modelType: arr[0].id, mid: arr[0].id, blkcd: state.secBlkcd }
  // console.log('arr',arr[0])
  getPmSchemes(state.waterfloodParams).then((res) => {
    if (res.code === 200 && res.data?.length) {
      state.floodParams = res.data[0].name
      state.formName.chlScid = res.data[0].id
    } else {
      state.floodParams = ''
    }
  })
}
//修改河道演进
function handleChangeRiverInfo(item) {
  let arr = state.riverInfo.filter((e) => {
    return e.id == item
  })
  state.riverInfoParams = { modelType: arr[0].specialId, mid: arr[0].id, blkcd: state.secBlkcd }
  // console.log('arr',arr[0])
  getPmSchemes(state.riverInfoParams).then((res) => {
    if (res.code === 200 && res.data?.length) {
      state.riverParams = res.data[0].name
      state.formName.evolScid = res.data[0].id
    }
  })
}
//修改水库
function handleChangeReservoir(item) {
  let arr = state.reservoir.filter((e) => {
    return e.id == item
  })
  // console.log('arr',arr[0])
  getPmSchemes({ modelType: arr[0].specialId, mid: arr[0].id, blkcd: state.secBlkcd }).then(
    (res) => {
      if (res.code === 200 && res.data?.length) {
        state.reservoirParams = res.data[0].name
        state.formName.resvScid = res.data[0].id
      }
    }
  )
}
function getAreaSchemeConfigList(schemeId) {
  return new Promise((resolve, reject) => {
    getAreaSchemeConfig({ scid: schemeId }).then((res) => {
      if (res.code === 200) {
        state.schemeSecArr = res.data.paramConf
        resolve(state.schemeSecArr)
      }
    })
  })
}
//保存方案
function handleSaveScheme() {
  emit('handleSaveScheme', state.zoneSchemesParams)
  console.log('666', state.zoneSchemesParams)
}
//下拉区域方案
function handleChangeAreaScheme(value) {
  getAreaSchemeConfigList(value)
}
//区域调整
function handleChangeArea() {
  console.log('123', state.riverObj)
  emitter.emit('riverModel', state.riverObj)
}
//点击区域
async function handleClickArea(item, index) {
  state.currentArea = index
  state.zoneSchemesParams.zid = item.zid
  state.zoneSchemesParams.zscid = ''
  state.zoneSchemeArr = []
  await getSchemeList({ zid: item.zid }).then((res) => {
    if (res.code === 200) {
      state.zoneSchemeArr = res.data
    }
  })
  await getZoneSchemesList({ rscid: props.schemeId, rsid: props.zId }).then((res) => {
    if (res.code === 200) {
      res.data.forEach((child) => {
        if (item.zid == child.zid) {
          state.zoneSchemesParams.zscid = child.zscid
        }
      })
    }
  })
  await getAreaSecList({ zid: item.zid }).then((res) => {
    if (res.code === 200) {
      // 获取控制断面
      state.secArr = res.data
      if (state.secArr.length) {
        emitter.emit('mapArea', state.secArr)
        handleClickSec(state.secArr[0], 0)
      }
    }
  })
}
//
async function handleClickSec(item, index) {
  state.editFlag = false
  state.formName = {
    chlMid: '',
    evolMid: '',
    resvMid: '',
    chlScid: '',
    evolScid: '',
    resvScid: '',
    blkcd: ''
  }
  state.secBlkcd = item.blkcd
  await getAreaSchemeConfigList(state.zoneSchemesParams.zscid)
  // if (state.areaConfig?.paramConf?.length > 0) {
  //   let a = state.areaConfig.paramConf.filter((e) => {
  //     return e.blkcd == item.blkcd
  //   })
  //   if (a.length > 0) {
  //     state.formName = a[0]
  //     state.formName.id = undefined
  //     state.formName.scid = undefined
  //     console.log('123', state.formName)
  //   }
  //   state.formName.blkcd = item.blkcd
  //   let flag = state.paramConfArr.filter((child) => {
  //     return child.blkcd == item.blkcd
  //   })
  //   if (flag.length == 0) {
  //     state.paramConfArr.push(state.formName)
  //   }
  //   handleChangeWaterFlood(state.formName.chlMid)
  // }
  if (state.schemeSecArr.length > 0) {
    let a = state.schemeSecArr.filter((e) => {
      return e.blkcd == item.blkcd
    })
    if (a.length > 0) {
      state.formName = a[0]
      state.formName.id = undefined
      state.formName.scid = undefined
    }
    state.formName.blkcd = item.blkcd
    let flag = state.paramConfArr.filter((child) => {
      return child.blkcd == item.blkcd
    })
    if (flag.length == 0) {
      state.paramConfArr.push(state.formName)
    }
    handleChangeWaterFlood(state.formName.chlMid)
  }
  state.currentSec = index
  state.secName = item.blknm
  emitter.emit('fixedPosition', item)
  emitter.emit('fixedSec', item.blkcd)
}
// //获取河系区域方案
// function getZoneSchemesList(id) {
//   return new Promise((resolve, reject) => {
//     getZoneSchemes({ rsid: id }).then((res) => {
//       if (res.code === 200) {
//         state.zoneSchemeArr = res.data
//         resolve(state.zoneSchemeArr)
//       }
//     })
//   })
// }
const closeDig = (v) => {
  showDialog.value = v
}
//获取河系区域
function getSecList(id) {
  return new Promise((resolve, reject) => {
    getZoneList({ rsid: id }).then((res) => {
      if (res.code === 200) {
        state.secList = res.data
        resolve(state.secList)
      }
    })
  })
}
//获取模型数据
function getModelList(val) {
  getModel({ specialId: val }).then((res) => {
    if (res.code === 200) {
      switch (val) {
        case 1:
          return (state.waterflood = res.data)
        case 2:
          return (state.riverInfo = res.data)
        case 3:
          return (state.reservoir = res.data)

        default:
          break
      }
    }
  })
}
onMounted(() => {
  getModelList(1)
  getModelList(2)
  getModelList(3)
})
</script>

<style lang="less" scoped>
.config-info {
  width: 100%;
  height: 100%;
  .content-box {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .content-left {
      width: 150px;
      height: 100%;
      margin: 0 5px;
      border-right: 2px solid #eee;
      .left-title {
        height: 40px;
        background: #eee;
        display: flex;
        justify-content: center;
        align-items: center;
        color: black;
      }
      .left-box {
        height: 350px;
        overflow-y: auto;
        .box-item {
          height: 30px;
          color: gray;
          display: flex;
          justify-content: space-between;
          align-items: center;
          span:nth-of-type(1) {
            width: 100%;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          &.active {
            span:nth-of-type(1) {
              cursor: pointer;
              color: #409eff;
            }
          }
          &:hover {
            span:nth-of-type(1) {
              cursor: pointer;

              color: #409eff;
            }
          }
          span:nth-of-type(2) {
            color: #409eff;
            margin-right: 10px;
          }
        }
        .box-btn {
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #409eff;
          color: #fff;
          cursor: pointer;
        }
      }
    }
    .content-right {
      width: calc(100% - 310px);
      height: 100%;
      padding-left: 10px;
      .right-title {
        margin-bottom: 10px;
        display: flex;
        line-height: 30px;
        justify-content: space-between;
        .name {
          color: #409eff;
        }
        .select-box {
          span {
            margin-right: 10px;
          }
        }
      }
      .right-box {
        width: 100%;
        height: calc(100% - 80px);
        :deep(.el-tabs--border-card) {
          height: 100%;
          .el-tabs__content {
            height: calc(100% - 60px);
            .el-tab-pane {
              height: 100%;
              .flood-form {
                padding: 15px;
                .form-item {
                  height: 50px;
                  .btn-color {
                    cursor: pointer;
                    color: #409eff;
                    margin-left: 50px;
                  }
                  .name {
                    color: grey;
                    margin-right: 20px;
                  }
                }
              }
            }
          }
        }
      }
      .footer-btn {
        text-align: right;
        margin-top: 10px;
      }
    }
  }
}
</style>
